<!--
 * @Author: your name
 * @Date: 2021-12-30 15:59:25
 * @LastEditTime: 2022-02-24 09:40:52
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\components\BaseMainSlot\kong.vue
-->
<!--
 * @Description: 插槽最基础布局-简单来说就是画个框框
 * @author:张捉妖师
-->
<template>
  <div class="staff-manage">
    <!-- 添加删除公用组件使用 -->
    <slot name="zhactbar"></slot>
    <slot name="farmtypeselectslot"></slot>
    <div ref="commonLayout" class="common-layout">
      <!-- 搜索行 -->
      <div v-if="$slots.searchbox" class="search-box">
        <slot name="searchbox"></slot>
      </div>
      <!-- 主要区域 -->
      <div class="zhcontent">
        <!-- 其他内容 -->
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenHeight: document.body.clientHeight
    }
  },
  watch: {
    // screenHeight(val) {
    //   // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
    //   if (!this.timer) {
    //     // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
    //     this.screenHeight = val
    //     this.timer = true
    //     let that = this
    //     // that.jisuanheight()
    //     setTimeout(function() {
    //       // 打印screenWidth变化的值
    //       that.jisuanheight()
    //       that.timer = false
    //     }, 400)
    //   }
    // }
  },
  mounted() {
    // const that = this
    // window.onresize = () => {
    //   return (() => {
    //     // window.screenHeight = document.body.clientHeight
    //     // that.screenHeight = window.screenHeight
    //     that.screenHeight = document.body.clientHeight
    //   })()
    // }
    // this.jisuanheight()
  },
  methods: {
    // jisuanheight() {
    //   let parent = this.$refs.commonLayout;
    //   parent.style.setProperty("height", '100%');
    //   // 获取元素实际需要占据的高度
    //   let height = parent.scrollHeight
    //   let zhactbar = this.$slots.zhactbar;
    //   if (!zhactbar) {
    //     height = height + 0
    //   } else {
    //     height = height - 100
    //   }
    //   parent.style.setProperty("height", height + 'px');
    //   // 判断是否使用农场类型插槽,动态设置高度
    //   // let searchboxnode = this.$slots.searchbox;
    //   // if (searchboxnode) {
    //   //   parent.style.setProperty("height", height - 40 + 'px');
    //   // } else {
    //   //   parent.style.setProperty("height", height + 'px');
    //   // }
    //   this.getheight()
    // },
    // // 我只是单纯的想拿个高度
    // getheight() {
    //   let parent = this.$refs.commonLayout;
    //   let height = parent.scrollHeight - 180
    //   this.$emit('richheight', height)
    // },
    // // 我只是单纯拿个各宽度
    // getwidth() {
    //   let parent = this.$refs.commonLayout;
    //   let width = parent.scrollWidth
    //   this.$emit('richwidth', width)
    // }
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/variables.scss";
.staff-manage {
  width: 100%;
  height: 100%;
  // margin-bottom: 10px;
  .common-layout {
    border: 1px solid $borderColor;
    height: 100%;
    padding: 10px;
    .search-box {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .label-input {
        display: flex;
        align-items: center;
        .label {
          width: 100px;
          white-space: nowrap;
        }
      }
      .search {
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          height: 30px;
        }
      }
    }
    .zhcontent {
      height: calc(100% - 80px);
      margin: 10px 0 0 0;
      overflow-y: auto;
      position: relative;
    }
    .zhcontent::-webkit-scrollbar {
      width: 6px !important;
    }
  }
}
</style>
